<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login and Register</title>
    <style>
        body {
            background-image: url("./images/loginbody.jpg");
            background-position: center;
            background-size: cover;
            overflow: hidden; /* 防止滚动条出现 */
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }

        .container {
            width: 300px;
            padding: 20px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            background-color: rgba(177, 171, 171, 0.3);

            border-radius: 8px;
        }

        h2 {
            text-align: center;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin-top: 10px;
        }

        input {
            margin: 5px 0;
            padding: 8px;
            font-size: 14px;
            opacity: 0.3;
        }

        .actions {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        button {
            padding: 8px 12px;
            font-size: 14px;
            cursor: pointer;
            opacity: 0.3;
        }

        .toggle {
            text-align: center;
            margin-top: 10px;
            color: blue;
            cursor: pointer;
        }
        
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>

<body>
    <canvas id="meteorCanvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"></canvas>
    <div class="container">
        <div id="login-div" class="login-div'">
            <h2>登录</h2>
            <form id="login-form">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
                <div class="actions">
                    <button type="button" id="cancel-login">Cancel</button>
                    <button type="submit" value="Login">Login</button>
                </div>
            </form>
            <div class="toggle" id="toggle-to-register">没有账号？前往注册</div>
        </div>

        <div id="register-div" class="register-div" style="display: none;">
            <h2>注册</h2>
            <form id="register-form">
                <label for="reg-username">Username:</label>
                <input type="text" id="reg-username" name="username" required>

                <label for="reg-email">Email:</label>
                <input type="email" id="reg-email" name="email" required>

                <label for="reg-password">Password:</label>
                <input type="password" id="reg-password" name="password" required>

                <div class="actions">
                    <button type="button" id="cancel-register">Cancel</button>
                    <button type="submit">Register</button>
                </div>
            </form>
            <div class="toggle" id="toggle-to-login">不想注册了？返回登录</div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            // Toggle between login and register views
            $('#toggle-to-register').click(function () {
                $('#login-div').hide();
                $('#register-div').show();
            });

            $('#toggle-to-login').click(function () {
                $('#register-div').hide();
                $('#login-div').show();
            });

            // Handle login form submission
            $('#login-form').submit(function(event) {
                event.preventDefault();
                const username = $('#username').val();
                const password = $('#password').val();

                $.ajax({
                    url: '/login',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ username, password }),
                    success: function(data) {
                        if (data.IsLogin) {
                            // console.log(data.IsLogin);

                            $.cookie('sessionId', data.sessionId, { expires: 1/24 }); // 1h
                            var cookies = $.cookie;
                            // console.log(cookies);
                            // alert('登录成功');
                            $('#login-form').hide();
                            window.location.href = document.referrer;
                        } else {
                            alert('登录失败，您的账号或密码有误');
                        }
                    }
                });
            });

            // Handle register form submission
            $('#register-form').submit(function (event) {
                event.preventDefault();
                const username = $('#reg-username').val();
                const password = $('#reg-password').val();
                const email = $('#reg-email').val();

                $.ajax({
                    url: '/register',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ username, password , email}),
                    success: function (data) {
                        if (data.IsRegist) {
                            alert('注册成功前往登录');
                            $('#register-div').hide();
                            $('#login-div').show();
                        } else {
                            alert('注册失败，请重试');
                        }
                    }
                });
            });

            // Cancel login and return to previous page
            $('#cancel-login').click(function () {
                window.location.href = document.referrer;
            });

            // Cancel register and return to previous page
            $('#cancel-register').click(function () {
                window.location.href = document.referrer;
            });

            //流星
            const canvas = document.getElementById('meteorCanvas');
            const ctx = canvas.getContext('2d');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            class Meteor {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.length = Math.random() * 100 + 50;
                    this.speed = Math.random() * 5 + 2;
                    this.angle = Math.random() * Math.PI * 2;
                    this.alpha = 1;
                }

                draw() {
                    ctx.save();
                    ctx.translate(this.x, this.y);
                    ctx.rotate(this.angle);
                    ctx.beginPath();
                    ctx.moveTo(0, 0);
                    ctx.lineTo(this.length, 0);
                    ctx.strokeStyle = `rgba(255, 255, 255, ${this.alpha})`;
                    ctx.lineWidth = 2;
                    ctx.stroke();
                    ctx.restore();
                }

                update() {
                    this.x += Math.cos(this.angle) * this.speed;
                    this.y += Math.sin(this.angle) * this.speed;
                    this.alpha -= 0.02;
                    if (this.alpha <= 0) {
                        this.reset();
                    }
                }

                reset() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.length = Math.random() * 100 + 50;
                    this.speed = Math.random() * 5 + 2;
                    this.angle = Math.random() * Math.PI * 2;
                    this.alpha = 1;
                }
            }

            const meteors = [];
            for (let i = 0; i < 10; i++) {
                meteors.push(new Meteor());
            }

            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                meteors.forEach(meteor => {
                    meteor.draw();
                    meteor.update();
                });
                requestAnimationFrame(animate);
            }

            animate();

            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            });
        });
    </script>
</body>

</html>
